<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 初步 </title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>Vue 初始化学习 </h1>
    <h2 id="one"></h2>
    <h2> {{ word }} </h2>
    <h2 v-on:click="count++" v-once>count -- {{ count }}</h2>
    <p> <button v-on:click="changeCount" >change count </button></p>
    <h3>tips --- {{ tips  }}</h3>
    <div>
      <input type="text" v-bind:value="tips" v-on:input="changeTips">
    </div>
    <h2 v-on:click="changeFlag"> {{flag? '今天晚上早点休息':"今天晚上我要上分...通宵"}}</h2>
    <button v-on:click="toggle=!toggle">点击开关</button>
    <div v-if="toggle">
      <h3 data-id="id" v-bind:data-word="word" v-bind:data-count="count"> v-bind v-on v-if  v-model v-for (5大指令 )</h3>
      <img v-bind:src="imgUrl" width="200" height="200" v-bind:alt="tips" v-bind:title="title">
    </div>
    <div>
      <h2>text==={{text}}</h2>
      <p>
        <input type="text" v-model="text">
      </p>
      <p>
        单价: <input type="text" v-model="price">
      </p>
      <p>
        购买数量: <input type="text" v-model="number">
      </p>
      <p>
        总计: {{price * number}}
      </p>
    </div>

    <div>
      <p v-show="show">WH2112 - 越努力越幸运 </p>
      <h3 v-show="!show"> WH2112 - 天道酬勤  </h3>
      <button v-on:click="show=!show">change show </button>
    </div>
    <h2 v-text="text">  </h2>
    <div v-html="html"> </div>
    <div>
      <ul>
        <li v-for="(l,i) in list" >
            {{l.title}} -- {{i}}
        </li>
      </ul>
    </div>
  </div>
  <div id="demo">
      <hr>
      <h2>Demo - Demo  -Demo </h2>
      <h2> count -- {{ count }}</h2>
      <h2> word -- {{ word}}</h2>
      <h2> msg -- {{msg}}</h2>
      <h2> text  ---- {{          text     }}</h2>
  </div>
  <script>
    console.log(Vue)   // 框架  构造函数  
    const msg = "Are you oK?"
    document.getElementById("one").innerHTML = msg;
    const vm = new Vue({
      el:"#app",  // Vue 挂载的范围  Vue生效的区域 
      data:{      // 初始化数据 
        word:"wh2112-daydayup",
        count:2022,
        tips:"允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统",
        flag:true,
        imgUrl:"http://47.104.209.44/base/imgs/1.jpg",
        title:"2112-天道酬勤",
        toggle:true,
        text:"wh2112-word hard ",
        price:200.1,
        number:120,
        show:true ,
        html:"<h2>Wh2112 奋斗最后9个星期 </h2>",
        list:[
          {title:"Vue"},
          {title:"React"},
          {title:"Node"},
          {title:"Typescript"},
          {title:"小程序"},
        ]
      },
      methods:{   // 自定义的方法  
        changeCount(){
          this.count+=5;
        },
        changeFlag(){
          this.flag = !this.flag 
        },
        changeTips(e){
          console.log(e)
          this.tips = e.target.value 
        }
      }
    })

    // 手动封装 构造函数  实现vue 双大括号 功能 
    function Vite(options){
       this.options = options
       this.el = this.options.el;
       this.data  = this.options.data 
       this.root = document.querySelectorAll(this.el)[0]
       console.log(this.root)

       this.init = function(){
          for(var key in this.data){
            this[key] = this.data[key]  // this.count = 2000 
            this.root.innerHTML = this.root.innerHTML.replace(new RegExp("{{" +" {0,}" +key+" {0,}"+"}}"),this[key])
          }
       }

       this.init()
    }

    new Vite({
      el:"#demo",
      data:{
        count:2000,
        word:"ARe you OK",
        msg:"daydayup - Fighting",
        text:"wh2112 - 别睡觉啦... "
      }
    })
  </script>
</body>
</html>

<!-- API文档     (别人 封装好的Vue.js 代码  教你怎么使用 )
接口文档   
测试文档
需求文档
开发文档

开发环境  针对于  开发者  development  dev   
测试环境                               test 
生产环境  针对于  客户    production   prod  
Freamwork  Vue =  React   +    Angular   
Vue===> view(发音)  侧重视图层   

Vue 通过实例化 Vue 这个构造函数 实现 vue 框架的所有功能 
vm  得到的实例化对象  
el  属性  document.querySelector(el);   说明Vue的作用范围 
会将app 里面所有的 DOM 渲染 成 虚拟DOM(?)  存储在 内存中 
data  Vue 需要初始化的数据  最常见的属性    
{{ }}  最普遍的模板标记标签  双大括号语法  插值表达式  
核心功能  允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
声明式  直接在 html  书写    a  声明式跳转   
编程式  直接在 javascript 书写  location.href   编程式跳转  

响应式系统   reaction  数据被修改之后  页面里面随之跟着里面更新 (vue提供自动响应式系统)

强大的指令功能  v-   代替你进行DOM 操作  Attribute  
v-bind   绑定vue标签 或者 组件的 属性 attribute v-bind:src v-bind:title  绑定动态的属性 
静态属性  永远不改变 不是变量
动态属性  接收是变量  (v-bind)  70%
v-if/v-show  条件渲染  控制显示隐藏  90% 
v-on 绑定事件  v-on:click  v-on:change v-on:keydown  100% 
v-for   循环 循环对象 或数组   90%
v-model  只能绑定在输入框  实现数据双向绑定 (view 视图 + model 数据模型)   90%  
当你修改 页面的时候  v-model 自动去更新数据层 
当你修改 数据的时候  v-model 自动去更新视图层 

v-text   textContent   只接受文本
v-html   innerHTML     文本和html标签 
v-once   read-only 
methods vue 属性  接收方法 

组件化 组件系统是 Vue 的另一个重要概念 
允许我们使用小型、独立和通常可复用的组件构建大型应用 

封装 类似 Vue 实现数据的双向绑定  双大括号语法
-->